<template>
  <div>
    <n-form style="width: 50%">
      <n-form-item label="流程ID">
        <n-input :value="processKey" readonly />
      </n-form-item>
      <n-form-item label="节点ID">
        <n-input v-model:value="state.taskKey" placeholder="请输入当前节点ID" />
      </n-form-item>
      <n-form-item label="BeanID">
        <n-input v-model:value="state.beanId" placeholder="请输入BeanID" @change="onChange" />
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup lang="ts">
  import { reactive, computed, watch, inject } from 'vue'
  import { mapState } from 'pinia'
  import modelerStore from '@/store/modeler'

  const props = defineProps<{ height: number }>()
  const emits = defineEmits(['select'])

  const state = reactive({ taskKey: '', beanId: '' })

  state.taskKey = inject('taskKey') as string
  const storeGetter = { ...mapState(modelerStore, ['getProcessId']) }
  const processKey = computed(() => storeGetter.getProcessId())

  const onChange = () => {
    const exp =
      "${flowCandidateUsers.getByBean('" +
      processKey.value +
      "','" +
      state.taskKey +
      "',applyUserId,'" +
      state.beanId +
      "')}"
    emits('select', [{ id: exp }])
  }
</script>

<style lang="scss" scoped></style>
